<template>
	<div>
		    <div class="C_oo r1 " style="display:block;" v-for="x in arr1">
        <div class="C_centor ce1">距结束</div>
        <div class="C_zon">
          <div class="C_img"><img :src="x.img"></div>
          <div class="C_text">
            <div class="text_i">{{x.title}}</div>
            <div class="text_num">￥{{x.price}}</div>
            <div class="C_ip_zon">
              <div class="C_ip">
                <div class="ip_l">-</div>
                <div class="ip_put"><input type="" name="" value="1"></div>
                <div class="ip_r">+</div>
              </div>
              <div class="ip_p">立即抢</div>
            </div>
          </div>
        </div>
      </div>
	</div>
</template>
<script>
import $  from "jQuery";
 
export default {
  name: 'list1',
  data () {
    return {
      msg: '<h1>这是限时秒抢页面</h1>',
      arr1:[],arr2:[],arr3:[],arr4:[]
    }
  },created:function () {
    var _this=this;
    $.get('http://www.beautifulmelody.top/shouqi.php?uname=&pwd=&type=%E6%89%80%E6%9C%89', function(data) {
      var data = JSON.parse(data);
      console.log(data.data)
      _this.arr1=data.data
      _this.arr3=data.data
    }) 
    $.get('http://www.beautifulmelody.top/yangjiu.php?uname=&pwd=&type=%E6%89%80%E6%9C%89', function(data) {
      var data = JSON.parse(data);
      console.log(data.data)
      _this.arr2=data.data
      _this.arr4=data.data
    })
    console.log(111)
  }
}
$(function(){
  $(".C_p").click(function(){
    $(this).css({
      background: '#CA0915',
      color: '#FEF9F9'
    }).siblings('.C_p').css({
      background: '#2F2F2F',
      color: '#2F2F2F'
    });
  })
})
// $(function(){
//   $(".c1").click(function(){
//     $(".r1").css("display","block").siblings().css("display","none");

//   })
//   $(".c2").click(function(){
//     $(".r2").css("display","block").siblings().css("display","none")
    
//   })
//   $(".c3").click(function(){
//     $(".r3").css("display","block").siblings().css("display","none")
    
//   })
//   $(".c4").click(function(){
//     $(".r4").css("display","block").siblings().css("display","none")
//   })

// })
 setInterval(function daojishi () {
  var a = new  Date("2017/4/29,21:00:00"); 
  var a1 = new  Date("2017/4/30,21:00:00");
  var a2=new  Date("2017/5/1,21:00:00");
  var a3=new  Date("2017/5/2,21:00:00");
  var b = new Date();
  var c = a - b; 
  var c1 = a1- b; 
  var c2 = a2- b; 
  var c3 = a3- b; 
  var d = Math.floor(c/(60*60*1000*24))
  var d1 = Math.floor(c1/(60*60*1000*24))
  var d2 = Math.floor(c2/(60*60*1000*24))
  var d3 = Math.floor(c3/(60*60*1000*24))
  if (d<=9) {
    d="0"+d;
  }
  var h = 23-b.getHours();
  var m = 59 - b.getMinutes();
  var s = Math.floor(c/(1000)%60);
  if (h<=9) {
    h="0"+h;
  }
  if (d1<=9) {
    d1="0"+d1;
  }
  if (d2<=9) {
    d2="0"+d2;
  }
  if (d3<=9) {
    d3="0"+d3;
  }

  if (m<=9) {
    m="0"+m;
  }if (s<=9) {
    s="0"+s;
  }
  $('.ce1').html("距离结束"+d+":"+h+":"+m+":"+s);
  $('.ce2').html("距离开始"+d1+":"+h+":"+m+":"+s);
  $('.ce3').html("距离开始"+d2+":"+h+":"+m+":"+s);
  $('.ce4').html("距离开始"+d3+":"+h+":"+m+":"+s);
},100)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home{
  width: 100%;
	margin: 0 auto;
	text-align: center;
}
.C_nav{
    width: 100%;height: 1rem;overflow: hidden;
    font-size: 0.4rem;
    text-align: center;line-height: 1rem;
  }
  .C_nav div{
    float: left;
  }
  .C_left{
    margin-left: 0.3rem;
  }
  .C_center{
    margin-left: 3.5rem;
  }
  .C_two{
    width: 100%;border: 1px solid;overflow: hidden;
  }
  .C_p{
    box-sizing: border-box;border: 1px solid #CCC;
    font-size: 0.4rem;width: 25%;float: left;
    background: #2F2F2F;
  }
  .C_p p{
    margin-left: 0.2rem;text-align: center;
    color: white;font-size: 0.35rem;
  }
  .C_centor{
    width: 6rem; height: 1rem;
    line-height: 1rem;
    font-size: 0.45rem;line-height: 0.6rem;margin: 0 auto;
  }
  img{
    width: 100%;
  }
  .C_oo{
    margin-top: 1rem;display:none;
  }
  .C_img{
    width: 4rem;float: left;
  }
  .C_text{
    float: left;font-size: 0.45rem;
  }
  .C_zon{
    margin-top: 0.4rem;overflow: hidden;
  }
  .C_ip div{
    float: left;height: 0.5rem;
    text-align: center; line-height: 0.5rem;
    
  }
  .C_ip{
    overflow: hidden;font-size: 0.45rem;float: left;
  }
  .ip_put input{
    width: 0.8rem;background: #ccc;margin-right: 0.2rem;margin-left: 0.2rem;text-align: center;
  }
  .ip_l{
    width: 0.4rem;height: 0.4rem; background: #ccc;
  }
  .ip_r{
    width: 0.4rem;height: 0.4rem; background: #ccc;
  }
  .C_ip_zon{
    overflow: hidden;
  }
  .ip_p{
    float: left;background: #CA0915;border-radius: 0.03rem;color: white;margin-left: 1rem;
    width: 2rem;text-align: center;height: 0.7rem; line-height: 0.7rem;font-size: 0.4rem;
  }
  .text_i{
    height: 1.5rem;
  }
  .text_num{
    margin-top: 0.2rem;margin-bottom: 0.8rem;color: red;
  }
  .ce1,.ce2,.ce3,.ce4{
    font-size: 18px;
    font-weight: bold;
    color: #f00;
  }
  .r1{
    border: 1px solid #ccc;
  }
</style>
